<template>
  <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="当前/最近直播" name="first">
        <div class="cur_live">
            <!-- 最近进行的直播 / 当前直播 -->
            
            <div class="sign_info">
                签到次数：{{signData.length}} , 总人数：{{totalNumber}}<br><br>

                  <el-table
                    :data="signData"
                    stripe
                    style="width: 100%">
                    <el-table-column
                    prop="title"
                    label="签到"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="realNumber"
                    label="签到人数">
                    </el-table-column>
                    <el-table-column
                    prop="sign.createTime"
                    label="开始时间"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="sign.endTime"
                    label="结束时间">
                    </el-table-column>
                    

                </el-table>

            </div>
            <div style="margin-top: 3%;">
             图表状况：
            </div>
            <div class="sign_chart_info">
                
                <div class="sign_left_chart">
                    比例图：<br><br>
                    <el-progress class="progress_chart" type="circle" :width="200" :percentage="progress"></el-progress>
                </div>

                <div class="sign_right_chart">
                    签到图表：<br><br>
                    <!-- <ve-line :data="chartData" width="500px"></ve-line> -->
                    <ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram>
                </div>
            </div>

            <div >
                签到记录:
                <div class="sign_record">
                  <div style="margin-top: 20px">
                    <el-select v-model="className" multiple placeholder="请选择"  @change="changeClassName">
                        <el-option
                          v-for="classInfo in myClassInfo"
                          :key="classInfo.classId"
                          :label="classInfo.label"
                          :value="classInfo.classId">
                        </el-option>
                        
                      </el-select>

                      <el-radio style="margin-left:3%" v-model="searchFilter" label="1" border>已签到</el-radio>
                       <el-radio style="margin-left:-2%" v-model="searchFilter" label="2" border>未签到</el-radio>

                  </div>

                  <template>
                    <el-table
                      :data="stuRecordData"
                      stripe
                      style="width: 100%">
                      <el-table-column
                        prop="stuNumber"
                        label="学号"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="className"
                        label="班级"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="signTime"
                        label="签到时间">
                      </el-table-column>
                    </el-table>
                  </template>
                </div>

            </div>

            

            <div>

            </div>
        </div>

    </el-tab-pane>
    <el-tab-pane label="所有直播记录" name="second" disabled>所有直播记录</el-tab-pane>

  </el-tabs>
  </div>
</template>

<script>
import { getSignRecords } from '../../api/live';

export default {
    data() {
      return {
        activeName: 'first',
        searchFilter:'1',
        tootalNumber:0,
        signNumber:0,
        signData:[
            // {
            //  title:"第一次签到",
            //  startTime: '2021-05-09 10:05:00',
            //  endTime: "2021-05-09 10:06:00",
            //  signNumber: 1,
            // }, 
        ],
        stuRecordData: [
          {
            stuNumber: '541713140206',
            name: "胡一涵",
            className: "3G软件1702",
            signTime:'2021-05-09 10:05:32',
          }
        ],
        progress: 0,
        chartData: {
          columns: ["次数", "签到比例"],
          rows: [
            // { '次数': "第一次签到", '签到比例': 1/3 , '3G软件1702签到人数':1,"3G软件1701签到人数":0},
           
          ],
        },
        chartSettings: {
          axisSite: { right: ['签到比例'] },
          yAxisType: ['KMB', 'percent'],
          yAxisName: ['人数', '比率'],
          showLine: ['签到比例'],
          stack: { '人数': ['3G软件1702签到人数', '3G软件1701签到人数'] }
        },
        myClassInfo: [
          {
            classId :1,
            label: "3G软件1702"
          },
          {
            classId :2,
            label: "3G软件1701"
          },

        ],
        className:[1,2]
      };
    },
    methods: {
      getRecord() {
        getSignRecords().then(res => {
          if (res.code == 200) {
            this.progress = Math.floor( (res.data.signRating * 10000 ) / 100)
            this.signData = res.data.records
            let index = 1;
            this.signData.forEach(data => {
              data.title = "第" + index + "次签到"
              index++;
              let classInfos = data.signClassInfos
              this.totalNumber = data.sign.totalNumber
              let chartData = {
                                '次数': data.title,
                                '签到比例': (data.realNumber / data.sign.totalNumber),
                }

              classInfos.forEach(classInfo => {
                let className = classInfo.className
                let signNumber = classInfo.signNumber

                this.chartData.columns.push(className)
                chartData[className] = signNumber
              })
              console.log(this.chartData.rows)
              this.chartData.rows.push(chartData)
            })
          }
        })
      },
      handleClick(tab) {
        console.log(tab.name);
      },
      changeClassName(val) {
        console.log(val)
      }
    },
    mounted() {
      this.getRecord()
    }
  };
</script>

<style>
.cur_live {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sign_info {
    margin-top: 2%;

}

.sign_chart_info {
    margin-top: 1%;
    height: 400px;
    text-align: center;

    display: flex;
    justify-content: space-around;
    align-items: center;
}

.progress_chart {
  flex: 0.5;
}

.sign_right_chart {
  flex: 0.6;
}

.sign_record {
  margin-top: 2%;

}

</style>